<template>

  <div>
    <div style="text-align: center;margin-top: 30px;">
      <el-table
        :data="goods_option.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: auto;margin-bottom: 20px;"
        row-key="id"
        border
        @selection-change="handleCurrentChange"
      >

        <el-table-column
          prop="warehouse"
          label="库位">
        </el-table-column>
        <el-table-column
          prop="product_name"
          label="产品名称">
        </el-table-column>
        <el-table-column
          prop="qty"
          label="库存数量">
        </el-table-column>
        <el-table-column
          prop="qty"
          label="计划应入库-实际入库">
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                     :page-sizes="[10, 20, 50, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
                     :total="this.goods_option.length">
      </el-pagination>
    </div>
  </div>

</template>

<script>
  import { mapGetters } from 'vuex'
  import { stock_list } from '../../api/other'

  export default {
    name: 'stock',
    computed: {
      ...mapGetters([
        'name'
      ])
    },
    data(){
      return{
        add:false,
        form:{
          product_name:'',
          brand:'',
          ex:'',
        },
        goods_option:[],
        list:[],
        pagesize:20,
        currentPage:1
      }
    },
    mounted() {
      this.goods()
    },
    methods:{
      goods() {
        stock_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            this.goods_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.goods_option.push({ id : "" ,product_name : "",warehouse:"",qty:""});
              this.goods_option[index].id= res.options[index][0];
              this.goods_option[index].product_name= res.options[index][2];
              this.goods_option[index].warehouse= res.options[index][1];
              this.goods_option[index].qty= res.options[index][3];
            }
            console.log(this.goods_option)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      handleSizeChange: function (size) {
        this.pagesize = size;
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
      },
    }
  }
</script>

<style lang="scss" scoped>
  .dashboard {
    &-container {
      margin: 30px;
    }
    &-text {
      font-size: 30px;
      line-height: 46px;
    }
  }
</style>
